<template>
    <view class="pay">
        <view class="pay-address">
            <view class="address">
                <button v-if="!address" @click="ChooseAddress">选择地址</button>
                <view v-else class="address-title">
                    <view class="address-title-name">{{address}}</view>
                    <view class="address-info">
                        <view>{{userName}}</view>
                        <view>{{telNumber}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="pay-list">
            <view class="list-title">已选商品</view>
            <view class="cart-list" >
            <view class="cart-item" v-for="(item) in onCartList" :key="item.goods_name"> 
                <view class="cart-img">
                <image :src="item.goods_small_logo"></image>
                </view>
                <view class="cart-detail">
                <view class="cart-name u-line-2">{{item.goods_name}}</view>
                <view class="cart-price">
                    <view class="cart-UnitPrice">￥{{item.goods_price}}</view>
                    <view class="cart-priceNum">
                    <view class="cart-value">x{{item.nums}}</view>
                    </view>
                </view>
                </view>
            </view>
            
            </view>
        </view>
        <view class="cart-footer">
        合计:
        <view class="cart-footer-price"> {{onTotPrice}}</view>
        <view class="cart-footer-btn"  @click="GoPay">
            去支付({{oncheckBoxNum}})
        </view>
        </view>
    </view>
</template>

<script>
import {mapGetters} from "vuex"
export default {
    computed:{
        ...mapGetters(["onCartList","onTotPrice","oncheckBoxNum"])
    },
    onLoad(){
        console.log(this.cartList);
    },
    data(){
        return{
            address:null,
            userName:"",
            telNumber:""
        }
    },
    methods:{
        async ChooseAddress(){
            const [err,result] =await uni.chooseAddress()
            console.log(result);
            const {provinceName,cityName,countyName,detailInfo,userName,telNumber}=result
            this.address=provinceName+cityName+countyName+detailInfo
            this.userName=userName
            this.telNumber=telNumber
        },
        GoPay(){
            if(!this.address){
                uni.showToast({title:"请选择收货地址",icon:"none"})
                return
            }
            const params={
                order_price:this.onTotPrice,
                consignee_addr:this.address,
                goods:this.onCartList.map(item=>({
                    goods_id:item.goods_id,
                    goods_price:item.goods_price,
                    goods_number:item.goods_number
                }))
            }
            console.log(params);
        }
    }
}
</script>
<style lang="scss" >
.pay{
    height: 100vh;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    flex-direction: column;
    .pay-address{
        padding-top: 20rpx;
        display: flex;
        .address{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 711rpx;
            height: 187rpx;
            background-color: #fff;
        }
        button{
            font-weight: 700;
            width: 303rpx;
            height: 89rpx;
            line-height: 89rpx;
            background-color: #fff;
            border: 1px solid #EA4350 ;
            color: #EA4350;
            border-radius: 50rpx;
            font-size: 30rpx;
        }
        .address-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            font-size: 30rpx;
            font-weight: 700;
            margin-left: 30rpx;
            .address-title-name {
                margin-bottom: 20rpx;
            }
            .address-info {
                display: flex;
                font-size: 24rpx;
                color: #666;
                view{
                    margin-right: 20rpx;
                }
            }
        }
    }

    .pay-list{
        margin-top: 40rpx;
        width: 711rpx;
        background-color: #fff;
        margin-bottom: 83rpx;
        .list-title{
            margin: 20rpx 0 0 20rpx;
            font-size: 28rpx;
            font-weight: 700;
        }
        .cart-list {
            padding: 20rpx;
            .cart-item{
                display: flex;
                .cart-checkbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .cart-img {
                    image {
                        width: 191rpx;
                        height: 191rpx;
                    }
                }
                .cart-detail {
                    flex:3;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: 20rpx;
                    .cart-name {
                        color: #666;
                        font-size: 28rpx;
                    }
                    .cart-price {
                        display: flex;
                        justify-content: space-between;
                    .cart-UnitPrice {
                        color: #ff2d4a;
                        font-size: 28rpx;
                    }
                    .cart-priceNum {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .cart-priceNum {
                            width: 36rpx;
                            height: 36rpx;
                            border: 1px solid #ccc;
                            border-radius: 50%;
                            color: #666;
                            font-size: 28rpx;
                        }
                        .cart-value {
                            padding:0 15rpx;
                            font-size: 28rpx;
                            color: #666;
                        }
                    }
                    }
                }
            }
        }
    }
    .cart-footer {
    width: 100%;
    display: flex;
    height: 83rpx;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    background-color: #fff;
    padding:0 20rpx;
    font-size: 28rpx;
    .cart-footer-price {
        flex:1;
        color: #ff2d4a;
        margin-left: 20rpx;
    }
    .cart-footer-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding:0 20rpx;
        height: 52rpx;
        background-color: #ff2d4a;
        border: 1px solid #ccc;
        font-size: 22rpx;
        border-radius: 30rpx;
        color: #fff;
    }
    }
}

</style>